<template>
  <div class="app-container">
    <div class="shareTip">
      分享的人指将店铺的活动或者商品链接分享出去的客户。可以根据分享数据，找到人脉价值更高的超级用户。<el-button type="text" @click="useGuide">查看详情></el-button>
    </div>
    <div class="dataStats">
      <div>
        <span>{{ shareStats.shareNumberTotal }}</span>次
        <div class="describe">
          <span>分享次数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">用户点击微信分享给好友、朋友圈的次数。不统计海报的生成次数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ shareStats.spreadNumberTotal }}</span>人
        <div class="describe">
          <span>传播人数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">通过用户分享链接或用户分享海报访问活动或商品的人数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ shareStats.memberBuyNumberTotal }}</span>人
        <div class="describe">
          <span>购买人数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">通过当前用户分享链接购买的人数。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ shareStats.buyNumberTotal }}</span>次
        <div class="describe">
          <span>购买次数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">通过用户分享链接购买商品的次数，同一个人多次购买会计多次。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div>
        <span>{{ shareStats.payTotalTotal }}</span>元
        <div class="describe">
          <span>付款总金额</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">通过用户分享链接付款的总金额。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="分享人:" prop="wxNickname">
        <el-input
          v-model="queryParams.wxNickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入备注内容"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="客户状态:" prop="enrollStatus">
        <el-select v-model="queryParams.enrollStatus" placeholder="请选择客户报名状态" clearable>
          <el-option
            v-for="dict in dict.type.enroll_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分享类型:" prop="productType">
        <el-select v-model="queryParams.productType" disabled placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.product_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择活动:" prop="activityId">
        <ActivitySelector
          style="width: 300px"
          placeholder="请选择活动"
          v-model="queryParams.activityId"
          retrun-type="string"
          :not-show-all-option="true"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="middleTip">
      未进行微信授权的客户会显示为“未知客户”
    </div>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="selection" width="50"/>
      <el-table-column label="分享人信息">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <router-link :to="'/member/info/index/' + scope.row.memberId" class="link-type link-text">
                <el-tooltip placement="top">
                  <div slot="content">
                    {{ scope.row.nickname }}
                  </div>
                  <div>{{ scope.row.nickname }}</div>
                </el-tooltip>
              </router-link>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客户状态" prop="enrollStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.enroll_type" :value="scope.row.enrollStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="报名信息">
        <template slot-scope="scope">
          <div>姓名：{{ scope.row.name }}</div>
          <div>手机号：{{ scope.row.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column label="分享次数" prop="shareNumber">
        <template slot-scope="scope">
          <span>全部：{{ scope.row.shareNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="传播人数" prop="spreadNumber">
        <template slot-scope="scope">
          <span>活动：{{ scope.row.spreadNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买人数" prop="memberBuyNumber">
        <template slot-scope="scope">
          <span>活动：{{ scope.row.memberBuyNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买次数" prop="buyNumber">
        <template slot-scope="scope">
          <span>活动：{{ scope.row.buyNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款总额（元）" prop="payTotal">
        <template slot-scope="scope">
          <span>活动：{{ scope.row.payTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark"/>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="goShareDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="分享的人使用指南" :visible.sync="useGuideOpen" width="700px">
      <div class="useGuide">
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          什么是分享的人</p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          分享的人指将店铺的活动或者商品链接分享出去的客户。</p>
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          分享的人有什么用</p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          帮您找到身边最有影响力的那个人，如在支付途中取消支付的客户付费意向较为强烈，单次浏览客户意向较弱。</p>
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          适用范围</p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          当前报名、抽奖、拼团这三种活动类型，以及店铺商品都已支持记录潜在客户，其他活动将陆续开放潜在客广功能。</p>
      </div>
    </el-dialog>
    <el-drawer
      :visible.sync="shareDetailDrawerOpen"
      direction="rtl"
      size="75%">
      <div class="memberDrawer">
        <div class="memberInfoDrawer">
          <image-preview :src="memberInfo.avatarUrl" :width="60" :height="60"/>
          <div class="nick">{{ memberInfo.nickname }}</div>
          <div class="remark">备注：{{ memberInfo.remark }}</div>
          <div class="mobile">{{ memberInfo.mobile }}</div>
          <div class="editRemark">
            <el-popover
              placement="top"
              width="200"
              v-model="visible">
              <p style="font-weight: bold; margin: 5px 0">备注内容</p>
              <el-input type="textarea" :rows="2" maxlength="10" v-model="memberRemark" max placeholder="请输入，最多10个字" clearable/>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button size="mini" type="text" @click="editRemark">确定</el-button>
              </div>
              <el-button slot="reference" type="text" size="mini">修改备注</el-button>
            </el-popover>
          </div>
        </div>
        <div class="shareStatsDrawer">
          <div>
            <span>{{ shareDrawerStats.shareNumberTotal }}</span>
            <p>分享次数</p>
          </div>
          <div>
            <span>{{ shareDrawerStats.spreadNumberTotal }}</span>
            <p>传播人数</p></div>
          <div>
            <span>{{ shareDrawerStats.buyNumberTotal }}</span>
            <p>带来报名人数</p>
          </div>
          <div>
            <span>{{ shareDrawerStats.memberBuyNumberTotal }}</span>
            <p>带来购买人数</p>
          </div>
          <div>
            <span>{{ shareDrawerStats.payTotalTotal }}</span>
            <p>带来付款金额(元)</p>
          </div>
        </div>
      </div>
      <div style="padding: 20px">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" size="mini" @input="getShareDrawerDataList">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="活动"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
        <el-table v-loading="drawerLoading" :data="shareDrawerDataList">
          <el-table-column property="title" label="活动/商品名称" width="240"/>
          <el-table-column label="活动时间" width="240">
            <template slot-scope="scope">
              {{ scope.row.startTime }} ~
              <br/>
              {{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column property="shareNumber" label="分享次数"/>
          <el-table-column property="spreadNumber" label="传播人数"/>
          <el-table-column property="memberBuyNumber" label="带来报名"/>
          <el-table-column property="payTotal" label="付款金额"/>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="goBringOrder(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getShareDrawerDataList"
        />
      </div>
    </el-drawer>
    <el-dialog title="带来报名数据" :visible.sync="bringOrderOpen" width="900px" :inlist="true" append-to-body>
      <el-table :data="bringOrderList">
        <el-table-column label="微信信息">
          <template slot-scope="scope">
            <div class="staffInfo">
              <image-preview :src="scope.row.avatarUrl" :width="30" :height="30"/>
              <div class="nickname">
                {{ scope.row.nickname }}
                <br/>
                ID：{{ scope.row.wxUserId }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="报名信息">
          <template slot-scope="scope">
            {{ scope.row.enrollName }}
            <br/>
            ID：{{ scope.row.enrollMobile }}
          </template>
        </el-table-column>
        <el-table-column label="报名活动" prop="activityTitle"/>
        <el-table-column label="商品名称" prop="welfareName" width="240"/>
        <el-table-column label="付款总金额（元）" prop="realityPayAmount">
          <template slot-scope="scope">
            <span>{{ scope.row.realityPayAmount }}元</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="bringOrderListTotal>0"
        :total="bringOrderListTotal"
        :page.sync="bringOrderQueryParams.pageNum"
        :limit.sync="bringOrderQueryParams.pageSize"
        @pagination="getBringOrderList"
      />
    </el-dialog>
  </div>
</template>

<script>
import ActivitySelector from "@/components/yjj/ActivitySelector";
import { sharePageList,shareStats,getMemberDetailById,updateMember } from "@/api/triones/member";
import { bringOrderDataList } from "@/api/triones/order";
export default {
  name: "index",
  components: { ActivitySelector },
  dicts: ['enroll_type','product_type'],
  data() {
    return {
      showSearch: true,
      shareStats: {
        shareNumberTotal: 0,
        spreadNumberTotal: 0,
        memberBuyNumberTotal: 0,
        buyNumberTotal: 0,
        payTotalTotal: 0
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wxNickname: undefined,
        remark: undefined,
        enrollStatus: undefined,
        productType: '1',
        activityId: undefined,
      },
      loading: false,
      dataList: [],
      total: 0,
      useGuideOpen: false,
      shareDetailDrawerOpen: false,
      /** 客户信息 */
      memberInfo: {
        id: undefined,
        nickname: undefined,
        avatarUrl: undefined,
        name: undefined,
        mobile: undefined,
        createTime: undefined,
        remark: undefined
      },
      tabPosition: '全部',
      drawerLoading: false,
      shareDrawerDataList: [],
      shareDrawerDataTotal: 0,
      drawerParams: {
        memberId: undefined,
        productType: 0
      },
      shareDrawerStats: {
        shareNumberTotal: 0,
        spreadNumberTotal: 0,
        memberBuyNumberTotal: 0,
        buyNumberTotal: 0,
        payTotalTotal: 0
      },
      visible: false,
      memberRemark: undefined,
      bringOrderOpen: false,
      bringOrderList: [],
      bringOrderListTotal: 0,
      bringOrderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined
      }
    }
  },
  created() {
    if (this.$route.query.activityId) {
      this.queryParams.activityId = this.$route.query.activityId;
    }
    this.shareDataStats();
    this.getList();
  },
  methods: {
    /** 分享的人数据统计 */
    shareDataStats() {
      shareStats(this.queryParams).then(response => {
        this.shareStats = response.data;
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      sharePageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    editRemark() {
      this.memberInfo.remark = this.memberRemark;
      this.memberRemark = undefined;
      updateMember(this.memberInfo).then(response => {
        this.$message.success("保存成功");
        this.visible = false;
      })
    },
    /** 使用指南 */
    useGuide() {
      this.useGuideOpen = true;
    },
    /** 查看详情 */
    goShareDetail(row) {
      this.shareDetailDrawerOpen = true;
      this.drawerParams.memberId = row.memberId;
      this.getMemberDetail(row.memberId);
      this.getShareDrawerDataList(0);
    },
    /** 获取用户信息 */
    getMemberDetail(memberId) {
      getMemberDetailById(memberId).then(response => {
        this.memberInfo = response.data;
      })
    },
    /** 获取分享的人与活动/商品相关列表 */
    getShareDrawerDataList(value) {
      this.drawerLoading = true;
      this.drawerParams.productType = value;
      if (value === '全部') {
        this.drawerParams.productType = 0;
      }
      if (value === '活动') {
        this.drawerParams.productType = 1;
      }
      if (value === '商品') {
        this.drawerParams.productType = 2;
      }
      sharePageList(this.drawerParams).then(response => {
        this.shareDrawerDataList = response.rows;
        this.shareDrawerDataTotal = response.total;
        this.shareDrawerStats.shareNumberTotal = this.shareDrawerDataList.reduce((total, item) => Number(total) + Number(item.shareNumber), 0);
        this.shareDrawerStats.spreadNumberTotal = this.shareDrawerDataList.reduce((total, item) => Number(total) + Number(item.spreadNumber), 0);
        this.shareDrawerStats.buyNumberTotal = this.shareDrawerDataList.reduce((total, item) => Number(total) + Number(item.buyNumber), 0);
        this.shareDrawerStats.memberBuyNumberTotal = this.shareDrawerDataList.reduce((total, item) => Number(total) + Number(item.memberBuyNumber), 0);
        this.shareDrawerStats.payTotalTotal = this.shareDrawerDataList.reduce((total, item) => Number(total) + Number(item.payTotal), 0);
        this.drawerLoading = false;
      })
    },
    /** 去查看带来的 订单列表 */
    goBringOrder(row) {
      this.bringOrderQueryParams = {
        pageNum: 1,
        pageSize: 10,
        memberId: this.drawerParams.memberId,
        activityId: row.productId
      }
      this.getBringOrderList();
      this.bringOrderOpen = true;
    },
    /** 获取带来的订单 */
    getBringOrderList() {
      bringOrderDataList(this.bringOrderQueryParams).then(response => {
        this.bringOrderList = response.rows;
        this.bringOrderListTotal = response.total;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-drawer__header {
  margin-bottom: 5px;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
}

.shareTip {
  font-size: 14px;
  background-color: #e5f4fe;
  align-content: center;
  padding: 8px;
  margin-bottom: 20px;
}

.useGuide {
  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  p:nth-last-of-type(2n) {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  p:nth-last-of-type(2n + 1) {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin-bottom: 20px;
    display: flex;
  }
}

.link-text {
  align-content: center;
}

.dataStats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em;
  margin-bottom: 20px;
  > div {
    height: 120px;
    width: 100%;
    background: -webkit-linear-gradient(bottom, #ffffff, #f2f5ff);
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
    align-content: center;
    text-align: center;
    > span {
      font-size: 25px;
      font-weight: bold;
    }
  }
}

.describe {
  span {
    font-size: 12px;
    vertical-align : middle;
  }
  svg {
    margin-left: 5px;
    vertical-align : middle;
    width: 12px;
  }
}

.tip {
  p {
    width: 300px;
    min-height: 10px;
    height: auto;
    font-size: 14px;
    margin: 0px;
  }
}

.middleTip {
  height: 40px;
  background-color: #fffbe6;
  padding-left: 10px;
  border: 2px solid #edb054;
  align-content: center;
  font-size: 13px;
  margin-bottom: 10px;
}

.memberDrawer{
  display: flex;
  .memberInfoDrawer {
    width: 25%;
    height: 200px;
    padding: 10px 40px 10px 40px;
    align-content: center;
    text-align: center;
    position: relative;
    .nick {
      font-size: 16px;
      padding-top: 10px;
    }
    .remark {
      font-size: 12px;
      padding-top: 10px;
      color:rgba(0,0,0,0.5)
    }
    .mobile {
      font-size: 14px;
      padding-top: 10px;
    }
    .editRemark {
      position: relative;
      left: 100px;
      bottom: 150px;
    }
  }
}
.shareStatsDrawer {
  padding: 20px;
  width: 75%;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em;
  > div {
    background: -webkit-linear-gradient(bottom, #ffffff, #e8f7ff);
    align-content: center;
    text-align: center;
    > span {
      font-size: 25px;
      font-weight: bold;
    }
    > p {
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 14px;
    }
  }
}
</style>
